<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <span class="filter-title filter-item">主播名称</span>
      <k-select
        v-model.trim="listQuery.extensionId"
        class="filter-item right-item"
        :custom-params="{opations:belongList, label:'lineName',value:'lineId'}"
        @handleSelectEvent="$refs.hqSearchDown.searchFun()"
      />
      <span class="filter-title filter-item">消费时间</span>
      <k-date-picker v-model="timeValue" class="filter-item right-item" @hqchang="$refs.hqSearchDown.searchFun()" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="listData"
      :show-summary="!authorityHandle(74)"
      :summary-method="getSummaries"
      border
      fit
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 50px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="extensionName" dth="150px" label="主播" align="center" />
      <el-table-column prop="userName" dth="200px" label="消费玩家" align="center" />
      <el-table-column prop="payAmount" dth="200px" label="消费金额" align="center" />
      <el-table-column prop="payTime" dth="100px" label="消费时间" align="center" />
      <el-table-column prop="anchorShareAmount" dth="100px" label="主播流水分成" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listAnchorStreamData } from '@/api/data/data'
import { getAnchors } from '@/api/user/user'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索

export default {
  components: { Pagination, hqSearchDown },
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '用户账号',
          rigth: true,
          value: 'userName'
        }, {
          label: '主播名称',
          value: 'extensionName'
        }
      ],
      timeValue: '',
      listData: [],
      belongList: [],
      payAmount: 0,
      anchorShareAmount: 0,
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        extensionId: undefined, // 身份所属",
        extensionType: undefined, // 消费挡位",
        startTime: '', // 最终创建时间",
        endTime: '', // 最早支付时间",
        key: '' // 饰品名称'
      }

    }
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.getAnchors()
  },
  mounted() { },
  methods: {
    loadData(v) {
      const extensionId = this.$route.params.extensionId
      if (extensionId) {
        this.listQuery.extensionId = extensionId
      }
      listAnchorStreamData({ ...v, ...this.listQuery }).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
        if (this.totalRows === 0) return
        this.payAmount = data.totalData.payAmount
        this.anchorShareAmount = data.totalData.anchorShareAmount
      })
    },
    // 获取主播房间的创建人
    getAnchors() {
      if (this.belongList.length === 0) {
        getAnchors().then(res => {
          this.belongList = res.data.data
        })
      }
    },
    /**
     * 合计
     * @param {obj} param
     */
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) { // 第一列
          sums[index] = '总计'
        } else if (column.property === 'payAmount') {
          sums[index] = this.payAmount
        } else if (column.property === 'anchorShareAmount') {
          sums[index] = this.anchorShareAmount
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) {
        this.listQuery.pager.pageNo = 1
        this.$route.params.extensionId = undefined
      }
      this.loadData(v)
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .right-item {
    margin-right: 10px;
  }

  ::v-deep .el-range-editor.el-input__inner {
    width: 250px;
  }
}

// .Anchor_flow_box {
//   width: 100%;
//   background: #fff;
//   border-radius: 10px;
//   padding: 20px;
//   min-height: calc(100vh - 150px);

//   .Anchor_flow_nav {
//     width: 100%;
//     display: flex;
//     align-items: center;
//     position: relative;

//     .filter-title {
//       height: 48px;
//       line-height: 48px;
//       font-size: 16px;
//       font-weight: 500;
//       margin-right: 22px;
//       color: #14162E;
//     }

//     .filter-item {
//       display: inline-block;
//       vertical-align: middle;
//       margin-bottom: 10px;
//     }

//     .Recharge_time {
//       display: flex;
//       align-items: center;
//       margin-left: 15px;
//     }

//     .Anchor_se {
//       position: absolute;
//       right: 0;
//     }
//   }

// }

.Anchor_box {
  .el-input {
    width: 250px;
  }

  .el-input__inner:focus {
    border-color: #3b425d
  }

  ;

  .el-select .el-input__inner:focus {
    border-color: #3b425d
  }
}
</style>
